<template>
  <div class="fencePage">
    <div class="top">
      <el-form :inline="true" size="mini">
        <el-col :span="12">
          <el-form-item label="人员名称：">
            <el-input v-model="listQuery.name" placeholder="请输入人员名称" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="起始时间：">
            <el-date-picker v-model="listQuery.startTime" type="datetime" placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="截止时间：">
            <el-date-picker v-model="listQuery.endTime" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <!-- <el-button type="primary">导出</el-button> -->
          </el-form-item>
        </el-col>

      </el-form>
    </div>
    <div class="center">
      <wpwork-table v-loading="listLoading" :data="tableData" :hasNO="false">
        <el-table-column prop="realName" label="人员名称" />
        <el-table-column prop="remark" label="出入围栏" />
        <el-table-column prop="time" label="出\入围栏时间" :formatter="wpwork.tableDateFormat" />
        <el-table-column prop="remark1" label="地址详情" />
      </wpwork-table>
    </div>
    <div class="pages">
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
        @pagination="initData" />
    </div>
    <!-- <div class="bot">
      <span>请输入告警信息需要发送的号码:</span>
      <el-input style="width: 160px;margin-right: 10px;" size="mini" />
      <el-button type="primary" size="mini">发送</el-button>
    </div> -->
  </div>
</template>
<script>

import request from "@/utils/request";
import wpworkMap from "@/components/wpworkMap/index.vue";

export default {
  name: 'fence',
  components: {
    wpworkMap,
  },
  data() {
    return {
      initialCoordinates: [],
      locationVisible2: false,
      tableData: [],
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        keyword: '',
        startTime: '',
        endTime: '',
        name: '',
      },
      total: 0,

    }
  },
  watch: {

  },
  computed: {

  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    search() {
      this.initData()
    },
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    initData() {
      this.listLoading = true
      this.listLoading = true
      console.log("🚀 ~ :135 ~ initData ~ this.listQuery:", this.listQuery)
      this.listQuery.startTime = this.listQuery.startTime ? this.listQuery.startTime : ''
      this.listQuery.endTime = this.listQuery.endTime ? this.listQuery.endTime : ''
      this.listQuery.name = this.listQuery.name ? this.listQuery.name : ''
      request({
        url: `/api/example/gpsInfo/fenceQuery`,
        method: "post",
        params: this.listQuery
      }).then((res) => {
        console.log("🚀 ~ :122 ~ initData ~ res:", res)
        this.tableData = res.data.records;
        this.total = res.data.total
        this.tableData.forEach(item => {
        })
        console.log("🚀 ~ :112 ~ initData ~ this.tableData:", this.tableData)
        this.listLoading = false
      });
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      console.log("🚀 ~ :117 ~ formatTimestamp ~ date:", date)

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(date.getDate()).padStart(2, '0');

      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    reset() {
      this.listQuery.startTime = ''
      this.listQuery.endTime = ''
      this.listQuery.name = ''
      this.initData()
    },
    position(row) {
      console.log("🚀 ~ :167 ~ position ~ row:", row)
      this.initialCoordinates = JSON.parse(row.executionLocation);
      this.locationVisible2 = true;
    },
    mapRtn() {
      this.locationVisible2 = false
    },
  }
}
</script>

<style scoped lang="scss">
.fencePage {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 10px;

  .center {
    display: flex;
    flex-direction: column;
    width: calc(100% - 10px);
    height: calc(100% - 140px);
    border-bottom: 1px solid #e4e7ed;
  }

  .bot {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
  }
}
</style>
